<template>
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #content>我的资料</template>
    </cu-custom>
    <form>
      <Cell label="账号" :content="userInfo.account" />

      <Field
        rightIcon
        disabled
        label="畅了号"
        placeholder="去填写"
        v-model="userInfo.cl_code"
        @click.stop="
          toSetValue('cl_code', '设置畅了号', `&text=${userInfo.cl_code || ''}`)
        "
      />

      <Cell
        label="头像及昵称"
        rightIcon
        @click="toUrl('mine/profile/avatar-nickname')"
      >
        <view class="userInfo-avatar__wrap">
          <image
            :class="[
              'userInfo-avatar',
              { 'userInfo-avatar__1': userInfo.avatar2 },
            ]"
            :src="userInfo.avatar"
            mode="widthFix"
          />
          <image
            :class="[
              'userInfo-avatar',
              { 'userInfo-avatar__2': userInfo.avatar3 },
            ]"
            v-if="userInfo.avatar2"
            :src="userInfo.avatar2"
            mode="widthFix"
          />
          <image
            class="userInfo-avatar"
            v-if="userInfo.avatar3"
            :src="userInfo.avatar3"
            mode="widthFix"
          />
        </view>
      </Cell>

      <Cell
        class="cell-2"
        label="基本信息"
        rightIcon
        @click.stop="toUrl('mine/profile/basic')"
      />

      <view class="warn">隐私</view>

      <Cell
        class="cell-2"
        label="实名信息"
        rightIcon
        @click.stop="toUrl('mine/profile/real-name')"
      />

      <Cell
        label="过往经历"
        rightIcon
        @click.stop="toUrl('mine/profile/experience')"
      />

      <Cell
        label="兴趣爱好"
        rightIcon
        @click.stop="toUrl('mine/profile/interests')"
      />

      <Cell
        label="人脉关系"
        rightIcon
        @click.stop="toUrl('mine/profile/interpersonal')"
      />

      <Cell
        label="公开信息"
        rightIcon
        @click.stop="baseListShow = !baseListShow"
      />

      <Cell
        label="地区第一人"
        rightIcon
        @click.stop="toUrl('mine/profile/regional-first')"
      />

      <view class="warn">
        请认真填写以上所有的内容，本软件在你共同愿意的情况下，点击允许搜索和推送信息，系统将会从相同的两个数或两个字以上，给你推送相关的人脉，让我们迅速找到曾经失联或现在有缘的朋友、让我们能更快地发展更新更好的人脉，在新的时机上有一个更好的收获。
      </view>
    </form>

    <Popups
      v-model:show="baseListShow"
      position="bottom"
      round
      closeable
      class="openInfo-popup-wrap"
    >
      <view class="title">公开信息</view>

      <view class="list">
        <template v-for="item in baseList">
          <text
            v-if="item.name"
            class="li"
            :class="{ on: item.state }"
            :key="item.name"
            @click="change(item)"
          >
            {{ item.name }}
          </text>
        </template>
      </view>
      <view class="btns-wrap">
        <text class="btn" @click="baseConfirm(0)">保存</text>
        <text class="btn" @click="baseConfirm(1)">一键公开</text>
      </view>
    </Popups>
  </Top-Page>
</template>

<script>
import Cell from "@/components/Cell/Cell.vue";
import Field from "@/components/Field/Field.vue";
import Popups from "@/components/Popups/index.vue";
import cityPicker from "@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker";
import { useloginStore } from "@/store/login";
import pinia from "@/store/index";
import avatar from "@/components/yq-avatar/yq-avatar.vue";
const loginStore = useloginStore(pinia);
import {
  chooseFiles,
  removeFile,
  uploadFiles,
  previewImage,
} from "@/utils/fileUtils.js";
export default {
  components: {
    avatar,
    cityPicker,
    Cell,
    Field,
    Popups,
  },
  data() {
    return {
      baseListShow: false,
      baseList: {
        all: {
          name: "",
          state: 0,
        },
        user_name: {
          name: "姓名",
          state: 0,
        },
        identity_address: {
          name: "出生地址",
          state: 0,
        },
        identity: {
          name: "身份证号码",
          state: 0,
        },
        address: {
          name: "现住地址",
          state: 0,
        },
        school: {
          name: "学校",
          state: 0,
        },
        friends: {
          name: "想记忆的家人或朋友",
          state: 0,
        },
        good_at: {
          name: "技能",
          state: 0,
        },
        speciality: {
          name: "现在特长",
          state: 0,
        },
        hobby: {
          name: "兴趣爱好",
          state: 0,
        },
        footprint: {
          name: "我的足迹",
          state: 0,
        },
        work_experience: {
          name: "工作经历",
          state: 0,
        },
        take_address: {
          name: "收货地址",
          state: 0,
        },
        employment_log: {
          name: "创业就业经历",
          state: 0,
        },
        lived_address: {
          name: "曾经住过的地址",
          state: 0,
        },
        previous_employer: {
          name: "曾工作单位",
          state: 0,
        },
        attended_schools: {
          name: "曾就读过的学校",
          state: 0,
        },
        mem_family_friends: {
          name: "记忆的家人或朋友",
          state: 0,
        },
        skills_learned: {
          name: "学过的技能",
          state: 0,
        },
        favorite_brand: {
          name: "喜欢的品牌",
          state: 0,
        },
      },
      temp_attended_schools: "",
      temp_previous_employer: "",
      temp_lived_address: "",
      skillsLearnedShow: false,
      skillsLearnedIndexList: [],
      skillsLearnedList: [
        "专业知识",
        "技术技能",
        "沟通能力",
        "团队合作",
        "解决问题能力",
        "创新能力",
        "领导能力",
        "适应能力",
        "时间管理",
        "专业道德",
      ],
      favoriteBrandShow: false,
      favoriteBrandIndexList: [],
      favoriteBrandList: [
        "香奈儿",
        "路易威登",
        "圣罗兰",
        "古驰",
        "慧驰",
        "卡地亚",
        "阿玛尼",
        "欧米茄",
        "范思哲",
        "爱马仕",
        "浪琴",
      ],
      avatarNumStr: "avatar", //第一或第二或第三个头像
      userInfoNum: 1, //第一或第二或第三个头像
      footprint: [],
      labelListIndex: [],
      addHobbyLabel: [],
      labelList: [],
      selectShow: false,
      addressData: {
        name: "",
        phone: "",
        identity_address: "",
        address: "北京北京市东城区", //北京北京市东城区
        moreAddres: "",
        isdefult: 0,
      },
      //现住址
      present_address_show: false,
      present_address_province: "北京",
      present_address_city: "北京市",
      present_address_area: "东城区",
      present_address_areaCode: "110101",
      present_address_address: "",
      //身份证地址
      show: false,
      province: "北京",
      city: "北京市",
      area: "东城区",
      areaCode: "110101",
      age: "",
      loginStore: loginStore,
      globalConfig: loginStore.globalConfig,
      userInfo: {},
      sexList: [
        // {
        // 	id: "2",
        // 	name: "未知",
        // },
        {
          id: "1",
          name: "男",
        },
        {
          id: "0",
          name: "女",
        },
      ],
      saved: false,
      baseShow: false,
    };
  },
  onShow() {
    const app = getApp();
    const modifyData = app.globalData.modifyData;

    if (modifyData) {
      if (modifyData.type === "cl_code") {
        this.userInfo.cl_code = modifyData.value;
      } else if (modifyData.type === "avatar-nickname") {
        this.userInfo = JSON.parse(JSON.stringify(loginStore.userInfo));
      }
    }

    setTimeout(() => {
      app.globalData.modifyData = null;
    }, 100);
  },
  mounted() {
    this.userInfo = JSON.parse(JSON.stringify(loginStore.userInfo));
    this.labelList = JSON.parse(
      JSON.stringify(uni.getStorageSync("hobby_list") ?? "[]")
    );

    this.province = this.userInfo.province ?? "北京";
    this.city = this.userInfo.city ?? "市辖区";
    this.area = this.userInfo.area ?? "东城区";
    this.addressData.address = this.userInfo.address;
    this.addressData.identity_address = this.userInfo.identity_address ?? "";
    this.footprint = this.userInfo.footprint;

    //自定义的爱好
    const hobbyArr = this.userInfo.hobby.split("-");
    hobbyArr.forEach((item) => {
      !this.labelList.includes(item) &&
        this.addHobbyLabel.push({
          value: item,
        });
    });
  },
  methods: {
    change(item) {
      console.log(item);
      item.state = item.state ? 0 : 1;
    },
    baseConfirm(type) {
      let obj = {};

      if (type) {
        for (let key in this.baseList) {
          obj[key] = 1;
        }
      } else {
        for (let key in this.baseList) {
          obj[key] = this.baseList[key].state;
        }
      }

      uni.showLoading({
        title: "更新中",
        mask: true,
      });

      this.$api.friendApi.updateUserInfoShow(obj).then((res) => {
        if (res.code === 0) {
          this.baseListShow = !this.baseListShow;
          let userInfo = uni.getStorageSync("userInfo");
          userInfo.user_show_data = res.data;
          for (let key in userInfo.user_show_data) {
            userInfo[key] = res.data[key];
          }
          uni.setStorageSync("userInfo", userInfo);
        }
        uni.showToast({
          title: `${res.msg}`,
        });
      });
    },
    //设置/修改 内容
    toSetValue(type, title, extra) {
      uni.navigateTo({
        url: `/pages/rest/modify/modify?type=${type}&title=${title}${extra}`,
      });
    },
    //路由跳转
    toUrl(path) {
      uni.navigateTo({
        url: `/pages/${path}`,
      });
    },
    addList(key, t, value) {
      if (value.trim() === "") {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
      } else {
        this.userInfo[key].push(value);
        this[t] = "";
      }
    },
    delList(key, index) {
      this.userInfo[key].splice(index, 1);
    },
    addrConfirm(e) {
      console.log(e, "e");
      this.province = e.provinceName;
      this.city = e.cityName;
      this.area = e.areaName;
      this.show = false;
    },
    changeBase(e) {
      e.state = e.state === 1 ? 0 : 1;
    },
    //添加头像和用户名
    addAvatar() {},
    //定位足迹
    getLocation() {
      geocode: true,
        uni.getLocation({
          success: (res) => {
            console.log("定位", res);
          },
        });
    },
    // 处理选择文件
    async handleChooseFiles(fieldName) {
      try {
        this[fieldName] = await chooseFiles(this[fieldName]);
      } catch (error) {
        console.error("选择文件失败:", error);
      }
    },
    // 处理删除文件
    handleRemoveFile(fieldName, index) {
      this[fieldName] = removeFile(this[fieldName], index);
    },
    // 处理图片预览
    handlePreviewImage(fieldName, index) {
      previewImage(this[fieldName], index);
    },
    // 处理上传文件
    async handleUploadFiles(fieldName) {
      try {
        const uploadUrl = this.$api.msgApi.uploadImage; // 替换为你的上传接口地址

        const files = [];
        this[fieldName].forEach((item) => {
          if (item.name) files.push(item);
        });

        console.log(files);
        const responses = await uploadFiles(files, uploadUrl);
        // console.log('上传成功:', responses);
        return responses;
      } catch (error) {
        // console.error('上传失败:', error);
        return "";
      }
    },
    //是否可以被搜索
    setBeSearch(e) {
      const value = e.detail.value;
      this.userInfo.be_search = value ? 1 : 0;
    },
    //爱好 -- 取消
    selectCancel() {
      // this.labelListIndex.length = 0;
      this.selectShow = false;
    },
    //爱好 -- 确定
    selectAffirm() {
      let adds = this.addHobbyLabel.map((item) => item.value);
      adds = adds.join("-");

      let s = "";

      this.labelList.forEach((item, index) => {
        s += this.labelListIndex.includes(index) ? `${item}-` : "";
      });

      s = s.substring(0, s.length - 1);

      if (s) {
        adds && (s += `-${adds}`);
      } else {
        s = adds;
      }

      const sArr = s.split("-");
      const arrSet = Array.from(new Set(sArr));
      const setStr = arrSet.join("-");

      this.userInfo.hobby = setStr;

      this.selectShow = false;
    },
    skillsLearnedConfirm() {
      let s = "";
      this.skillsLearnedList.forEach((item, index) => {
        s += this.skillsLearnedIndexList.includes(index) ? `${item}-` : "";
      });
      s = s.substring(0, s.length - 1);
      this.userInfo.skills_learned = s;
      this.skillsLearnedShow = false;
    },
    favoriteBrandConfirm() {
      let s = "";
      this.favoriteBrandList.forEach((item, index) => {
        s += this.favoriteBrandIndexList.includes(index) ? `${item}-` : "";
      });
      s = s.substring(0, s.length - 1);
      this.userInfo.favorite_brand = s;
      this.favoriteBrandShow = false;
    },
    changeClick(value, value2, value3, value4) {
      // console.log('地址选择器 = ' + value + value2 + value3 + value4);

      this.province = value;
      this.city = value2;
      this.area = value3;
      this.areaCode = value4;

      // this.userInfo.address = `${value}-${value2}-${value3}`;
    },
    changeClick2(value, value2, value3, value4) {
      // console.log('地址选择器 = ' + value + value2 + value3 + value4);

      this.present_address_province = value;
      this.present_address_city = value2;
      this.present_address_area = value3;
      this.present_address_areaCode = value4;

      this.present_address_address = `${value}-${value2}-${value3}`;
    },
    onhideShow() {
      this.show = false;
      this.present_address_show = false;
    },
    //选中省市区
    onsetCity(e) {
      let data = e.detail.target.dataset;
      let address = data.province + data.city + data.area;
      this.show = false;

      // this.addressData.address = address;
      this.province = data.province;
      this.city = data.city;
      this.area = data.area;
    },
    //选中省市区
    onsetCity2(e) {
      let data = e.detail.target.dataset;
      let address = data.province + data.city + data.area;
      this.present_address_show = false;
      this.present_address_address = address;
    },
    labelON(index) {
      let s = false;
      if (this.labelListIndex.includes(index)) {
        s = true;
      } else {
        s = false;
      }
      return s;
    },
    labelONSkillsLearned(index) {
      let s = false;
      if (this.skillsLearnedIndexList.includes(index)) {
        s = true;
      } else {
        s = false;
      }
      return s;
    },
    labelONFavoriteBrand(index) {
      let s = false;
      if (this.favoriteBrandIndexList.includes(index)) {
        s = true;
      } else {
        s = false;
      }
      return s;
    },
    //添加<爱好>标签
    addHobby() {
      this.addHobbyLabel.push({
        value: "",
      });
    },
    updateInput(index, event) {
      this.$set(this.addHobbyLabel, index, {
        value: event.detail.value,
      });
    },
    changeLabel(index) {
      const ind = this.labelListIndex.indexOf(index);
      if (ind == -1) {
        this.labelListIndex.push(index);
      } else {
        this.labelListIndex.splice(ind, 1);
      }
    },
    changeLabelSkillsLearned(index) {
      const ind = this.skillsLearnedIndexList.indexOf(index);
      if (ind == -1) {
        this.skillsLearnedIndexList.push(index);
      } else {
        this.skillsLearnedIndexList.splice(ind, 1);
      }
    },
    changeLabelFavoriteBrand(index) {
      const ind = this.favoriteBrandIndexList.indexOf(index);
      if (ind == -1) {
        this.favoriteBrandIndexList.push(index);
      } else {
        this.favoriteBrandIndexList.splice(ind, 1);
      }
    },
    ageBlur(event) {
      const value = event.detail.value;
      this.userInfo.age = Number(value);
    },
    logout() {
      let client_id = uni.getStorageSync("client_id");
      this.$api.LoginApi.logout({
        client_id: client_id,
      }).then((res) => {
        if (res.code == 0) {
          loginStore.logout();
        }
      });
    },
    textareaBInput(e) {
      this.userInfo.motto = e.detail.value;
    },
    changeSex(evt) {
      this.userInfo.sex = parseInt(evt.detail.value);
    },
    // 通用的上传并解析文件数据的方法
    async uploadAndParseFiles(fieldName) {
      const uploadFilesRes = await this.handleUploadFiles(fieldName);
      return uploadFilesRes.map((item) => JSON.parse(item.data).data);
    },
    async saveInfo() {
      if (this.userInfo.user_name == "") {
        uni.showToast({
          title: "请输入实名信息",
          icon: "none",
        });
        return false;
      }

      if (this.userInfo.identity == "") {
        uni.showToast({
          title: "请输入身份证信息",
          icon: "none",
        });
        return false;
      }

      if (this.userInfo.realname == "") {
        uni.showToast({
          title: "请输入昵称",
          icon: "none",
        });
        return false;
      }

      if (!Number(this.userInfo.age)) {
        uni.showToast({
          title: "请输入年龄",
          icon: "none",
        });
        return false;
      }

      if (Number(this.userInfo.age) < 18 || Number(this.userInfo.age) > 100) {
        uni.showToast({
          title: `我们的服务仅适用于年满18岁及以上的成年人。请重新输入`,
          icon: "none",
        });
        return false;
      }

      let footprint = [];
      try {
        // 我的足迹
        footprint = await this.uploadAndParseFiles("footprint");
        this.userInfo.footprint.push(...footprint);
      } catch (error) {
        console.error("上传文件失败:", error);
      }

      // 防止无限次点击
      this.saved = true;
      let params = {
        // be_search: this.userInfo.be_search, //是否可以被搜索
        take_address: this.userInfo.take_address, //收货地址
        employment_log: this.userInfo.employment_log, //创业就业经历
        speciality: this.userInfo.speciality, //特长专长
        footprint: this.userInfo.footprint, //我的足迹
        realname: this.userInfo.realname,
        realname2: this.userInfo.realname2,
        realname3: this.userInfo.realname3,
        email: this.userInfo.email,
        cl_code: this.userInfo.cl_code,
        sex: this.userInfo.sex,
        motto: this.userInfo.motto,
        age: this.userInfo.age,
        user_name: this.userInfo.user_name,
        school: this.userInfo.school,
        friends: this.userInfo.friends,
        good_at: this.userInfo.good_at,
        hobby: this.userInfo.hobby,
        work_experience: this.userInfo.work_experience,
        province: this.province,
        city: this.city,
        area: this.area,
        address: this.addressData.address,
        identity_address: this.addressData.identity_address,
        identity: this.userInfo.identity,

        lived_address: this.userInfo.lived_address,
        previous_employer: this.userInfo.previous_employer,
        attended_schools: this.userInfo.attended_schools,
        mem_family_friends: this.userInfo.mem_family_friends,
        skills_learned: this.userInfo.skills_learned,
        favorite_brand: this.userInfo.favorite_brand,
      };

      this.$api.msgApi.updateUserInfo(params).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });

          let data = JSON.parse(JSON.stringify(res.data));
          loginStore.login(data);
          uni.setStorageSync("userInfo", data);
          console.log(data);
        }
      });
      // 8秒后可以重新保存
      setTimeout(() => {
        this.saved = false;
      }, 8000);
    },
    setAvatar() {
      uni.navigateTo({
        url: "/pages/mine/avatar",
      });
    },
    uploadAvatar(res) {
      uni.showLoading({
        title: "上传中...",
      });
      uni.uploadFile({
        url: this.$api.msgApi.uploadAvatar,
        filePath: res.path,
        name: "file",
        header: {
          Authorization: uni.getStorageSync("authToken"),
        },
        formData: {
          ext: "png",
          num: this.userInfoNum,
        },
        success: (e) => {
          uni.hideLoading();
          let res = JSON.parse(e.data);
          if (res.code == 0) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            // this.userInfo.avatar = res.data;

            if (this.userInfoNum < 2) {
              this.userInfo[`avatar`] = res.data;
            } else {
              this.userInfo[`avatar${this.userInfoNum}`] = res.data;
            }
            let data = JSON.parse(JSON.stringify(this.userInfo));
            loginStore.login(data);
          }
        },
        fail: (res) => {
          uni.hideLoading();
        },
      });
    },
  },
};
</script>

<style lang="scss">
@import url("./index.scss");
.btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 40rpx;
  line-height: 1;
}

.btn-ca {
  padding: 32rpx 80rpx;
  border-radius: 16rpx;
  letter-spacing: 2rpx;
}

.btn-cancel {
  color: #3d3d3d;
  background-color: #dddddd;
  font-size: calc(var(--amplified_base) * 28rpx);
}

.btn-affirm {
  background-color: #1677ff;
  color: #fff;
  font-size: calc(var(--amplified_base) * 28rpx);
}

.uni-input-1 {
  width: 100%;
  min-height: 3em;
}

.title {
  flex-shrink: 0;
}

.value-wrap-2 {
  width: 100%;
  min-height: 1em;
  height: auto;
}

.props-overlay {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 203;
  background-color: rgba(0, 0, 0, 0.7);
}

.props-hobby-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 204;
  padding: 32rpx 32rpx 64rpx;
  background: #fff;
  transition: transform 0.3s;
  border-radius: 16rpx 16rpx 0 0;

  .add-hobby-label {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-size: calc(var(--amplified_base) * 28rpx);

    .add-hobby-item {
      width: 4em;
      margin-top: 24rpx;
      margin-right: 16rpx;
      box-sizing: content-box;
      padding: 24rpx;
      background-color: #1677ff;
      color: #fff;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
    }
  }

  .add-wrap {
    display: flex;
    align-items: center;
    margin-top: 50rpx;
    font-size: calc(var(--amplified_base) * 28rpx);
    color: #6a6a6a;

    .add {
      margin-right: 14rpx;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #eaeaea;
      color: #909090;
    }
  }
}

.hobby-title {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.title-t {
  position: absolute;
  width: 100%;
  padding: 0 2em;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.cross {
  position: relative;
  width: 40rpx;
  height: 40rpx;
}

.cross::before,
.cross::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2rpx;
  background-color: black;
  top: 50%;
  transform-origin: center;
}

.cross::before {
  transform: rotate(45deg);
}

.cross::after {
  transform: rotate(-45deg);
}

.hobby-wrap {
  max-height: 40vh;
  overflow: scroll;
}

.hobby-content {
  margin-top: 40rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-content: flex-start;
}

.label-li {
  padding: 24rpx;
  border: 1rpx solid #6a6a6a;
  color: #6a6a6a;
  margin-right: 16rpx;
  margin-top: 12rpx;
  border-radius: 16rpx;
  font-size: calc(var(--amplified_base) * 28rpx);
}

.label-li2 {
  padding: 12rpx 16rpx;
  border: 1rpx solid #ccc;
  color: #ccc;
  margin-right: 18rpx;
  margin-top: 18rpx;
  border-radius: 8rpx;
}

.on2 {
  background-color: #1677ff;
  color: #fff;
}

.on {
  background-color: #1677ff;
  color: #fff;
}

.cu-form-group-1 {
  padding: 1rem 30upx;

  &.align-start .title {
    margin-top: 0;
  }
}

.upimage-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  //图片反显
  .upimage-item {
    position: relative;
    width: calc(var(--amplified_base) * 120rpx);
    height: calc(var(--amplified_base) * 120rpx);
    border-radius: calc(var(--amplified_base) * 16rpx);
    overflow: hidden;
    margin-left: 12rpx;

    .upimage-item__image {
      position: relative;
      width: 100%;
      height: 100%;
    }

    //删除图标
    .close-css_icon {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #f4f4f4;
      border-radius: 50%;

      &::before,
      &::after {
        width: 30rpx;
        height: 4rpx;
      }
    }
  }

  //添加图片
  .add-image {
    background: #f5f5f7;

    &::after,
    &::before {
      background-color: #a2a3a5;
    }

    &::after {
      left: calc(50% - 1rpx);
    }
  }
}

.cu-form-group-avatar {
  justify-content: flex-start;
}

.avatar-content {
  pointer-events: none;
}

.avatar-wrap {
  margin-right: 32rpx;
}

.switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

:deep .avatar-content__activity .my-avatar {
  border: 4rpx solid #1a66ff;
  border-radius: 50%;
}

:deep .avatar-content__activity .add-avatar {
  border: 4rpx solid #1a66ff;
  border-radius: 50%;
}

.warn {
  margin-top: 20rpx;
  font-size: calc(var(--amplified_base) * 26rpx);
  padding: 10rpx 30rpx;
}

:deep(.cell-content) {
  text-align: right;
}

.cell-content__gray {
  color: #999;
}

.userInfo-avatar__wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;

  .userInfo-avatar {
    position: inherit;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 4rpx solid var(--subject_color);
  }

  .userInfo-avatar__1 {
    left: 40rpx;
  }

  .userInfo-avatar__2 {
    left: 20rpx;
  }
}

:deep(.openInfo-popup-wrap) {
  width: 100%;
  padding: 30rpx 20rpx;
  max-height: 100vh;
  overflow-y: auto;

  .title {
    text-align: center;
    font-weight: bold;
    font-size: 36rpx;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx;
    margin-top: 20rpx;

    text {
      color: #6a6a6a;
      border: 1px solid;
      padding: 12rpx 22rpx;
      margin-right: 16rpx;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
      line-height: 1;
    }
    .on {
      background-color: #cccccc;
      color: #fff;
    }
  }

  .btns-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    .btn {
      flex: 1;
      display: block;
      margin: 30rpx;
      background-color: #1677ff;
      color: #fff;
      padding: 20rpx;
      border-radius: 10rpx;
      text-align: center;
    }
  }
}
</style>
